
import React from 'react';
import { Card } from 'antd';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/funnel';

import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import styles from './MyEchart.less';

class EchartsTest extends React.Component {
  constructor(...args) {
    super(...args);
  }
  componentWillReceiveProps({ msg }) {
    const msgs = msg || [];
    const key_arr = [];
    for (let i = 0; i < msgs.length; i++) {
      key_arr.push(msgs[i].name);
    }


    const myChart = echarts.init(document.getElementById('main'));
    const projectArray = [];
    const option = {
      backgroundColor: '#fff',
      title: {

      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}%',
      },
      toolbox: {
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {},
        },
      },
      legend: {
        data: key_arr,
      },
      calculable: true,
      series: [
        {
          name: '漏斗图',
          type: 'funnel',
          left: '10%',
          top: 60,
					// x2: 80,
          bottom: 60,
          width: '80%',
					// height: {totalHeight} - y - y2,
          min: 0,
          max: 100,
          minSize: '0%',
          maxSize: '100%',
          sort: 'descending',
          gap: 2,
          label: {
            normal: {
              show: true,
              position: 'inside',
            },
            emphasis: {
              textStyle: {
                fontSize: 20,
              },
            },
          },
          labelLine: {
            normal: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid',
              },
            },
          },
          itemStyle: {
            normal: {
              borderWidth: 0,
              shadowBlur: 30,
              shadowOffsetX: 0,
              shadowOffsetY: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          data: msgs,
        },
      ],
    };


    myChart.setOption(option);
    window.onresize = myChart.resize;
  }
  render() {
    return (
      <div >
        <div id="main" className={styles.cardBack} />
      </div>
    );
  }
}

export default EchartsTest;
